<template>
    <div>
        <!--module1 tree page-->
        <div class="container">
            <h3 style="font-weight: 300;">设置系统菜单</h3>
            <hr style="margin: 0 0 1rem;border: none;border-bottom: 1px solid #eee;">
            <el-tree :data="tree" :props="defaultProps" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.name }}</span>
                <span>
                  <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => append0(node, data)">
                    添加同级
                  </el-button>
                  <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => append1(node, data)">
                    添加子级
                  </el-button>
                  <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => edit(node, data)">
                    编辑
                  </el-button>
                  <el-button
                      type="text"
                      size="mini"
                      @click.stop="() => remove(node, data)">
                    删除
                  </el-button>
                </span>
            </span>
            </el-tree>
            <!--<hr>-->
            <br>
        </div>
        <!--<div v-show="showForm">-->
            <!--<treeAdd ref="addTree" @chang="treeChange"></treeAdd>-->
        <!--</div>-->
        <el-dialog title="角色" :visible.sync="showForm" width="50%">
            <treeAdd ref="addTree" @chang="treeChange"></treeAdd>
        </el-dialog>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    import treeAdd from '@/components/module1/Tree-add'
    export default {
        components: {
            treeAdd
        },
        data(){
            return{
                tree: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                showForm: false,
                treeData: {},
            }
        },
        methods: {
            // 获取菜单列表
            getMenu(){
                this.config.get('/manager/manager/menu/findAll', {}).then(res=>{
                    if(res.data.code==='0'){
                        let arr = res.data.menuList;
                        this.tree = pub.arrayToTreeList(arr, 'id', 'pid');
                    }else{
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            handleNodeClick(data) {
                // console.log(data);
            },
            // 添加同级节点
            append0(node, data){
                this.showForm = true;
                data.par = '0';
                setTimeout(()=>{
                    this.$refs.addTree.treeClick(data);
                }, 100);
            },
            // 添加子级节点
            append1(node, data){
                this.showForm = true;
                data.par = '1';
                setTimeout(()=>{
                    this.$refs.addTree.treeClick(data);
                }, 100);
            },
            // 编辑
            edit(node, data){
                this.showForm = true;
                data.par = '2';
                setTimeout(()=>{
                    this.$refs.addTree.treeClick(data);
                }, 100);
            },
            // 删除
            remove(node, data){
                this.$confirm('确定删除此菜单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.config.post('/manager/manager/menu/delete', {id: data.id}).then(res=>{
                        if(res.data.code==='0'){
                            this.treeChange(res.data.message);
                        }else{
                            this.$message.error(this.config.handleError(res.data));
                        }
                    })
                });
            },
            // 数结构发生变化(这个方法被子组件调用)
            treeChange(msg){
                this.$message.success(msg);
                this.showForm = false;
                this.getMenu();
            },
        },
        mounted(){
            this.getMenu();
        }
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
